<template>
	<view>
		<ul>
			<li>
				<view class="left">
					<view class="img1">
						<image-view class="img" :src="item.captureVehicleUrl"></image-view>
					</view>
				</view>
				<view class="right">
					<view class="line">
						<view class="title">{{ item.monitorName }}</view>
						<view class="title">{{ item.judgmentResults }}</view>
					</view>
					<view class="line_box">
						<image class="icon" src="/static/images/call_police.png"></image>
						<text class="text">{{ item.monitorLevelName }}</text>
					</view>
					<view class="line_box">
						<image class="icon" src="/static/images/license_plate.png"></image>
						<text class="text">{{ item.vehiclePlateNumber }}</text>
					</view>
					<view class="line_box">
						<image class="icon" src="/static/images/car.png"></image>
						<text class="text">{{ vehicleTypeFormat }}</text>
					</view>
					<view class="line_box">
						<image class="icon" src="/static/images/license_plate_color.png">
						</image>
						<text class="text">{{ vehiclePlateColorFormat }}</text>
					</view>
					<view class="line_box">
						<image class="icon" src="/static/images/camera.png"></image>
						<text class="text">{{ item.deviceName }}</text>
					</view>
					<view class="line_box">
						<image class="icon" src="/static/images/time.png"></image>
						<text class="text">{{ item.alarmTime | formatDate('-') }}</text>
					</view>
					<view class="line_box">
						<uni-icons type="pyq" size="20"></uni-icons>
						<text class="text">{{ formatMask }}</text>
					</view>
				</view>
			</li>
		</ul>
	</view>
</template>

<script>
export default {
	props: {
		item: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {}
	},
	computed: {
		formatMask() {
			const str = this.item.isAlarm,
				sexEnum = {
					"1": this.$t('warn:confirm'),
					"2": this.$t('warn:cancel'),
					"3": this.$t('warn:doubtful'),
					"0": this.$t('warn:pendingReview')
				}
			return sexEnum[str] || '--'
		},
		vehicleTypeFormat() {
			const str = this.item.vehicleType,
				sexEnum = {
					"null": this.$t('search:unknown'),
					"0": this.$t('search:unknownOther'),
					"1": this.$t('search:carPlaceholder'),
					"2": this.$t('search:truckPlaceholder'),
					"3": this.$t('search:van'),
					"4": this.$t('search:bus'),
					"5": this.$t('search:smallTruckPlaceholder'),
					"6": this.$t('search:suvPlaceholder'),
					"7": this.$t('search:midBus'),
					"8": this.$t('search:motorcycleNonMotor'),
					"9": this.$t('search:pedestrian'),
					"10": this.$t('search:schoolBus'),
					"11": this.$t('search:dumpTruck'),
					"12": this.$t('search:highRisk'),
					"13": this.$t('search:cyclistPlaceholder'),
					"15": this.$t('search:microCar'),
					"16": this.$t('search:smallCar'),
					"17": this.$t('search:compactCar'),
					"18": this.$t('search:hatchback'),
					"19": this.$t('search:sedan'),
					"20": this.$t('search:lightVan'),
					"21": this.$t('search:smallSuv'),
					"22": this.$t('search:compactSuv'),
					"23": this.$t('search:midSuv'),
					"24": this.$t('search:largeSuv'),
					"25": this.$t('search:fullSizeSuv'),
					"26": this.$t('search:microVan'),
					"27": this.$t('search:mpv'),
					"28": this.$t('search:coupe'),
					"29": this.$t('search:miniTruck'),
					"30": this.$t('search:pickup'),
					"31": this.$t('search:midTruck'),
					"32": this.$t('search:lightTruck'),
					"33": this.$t('search:heavyTruck'),
					"34": this.$t('search:taxi'),
					"35": this.$t('search:tanker'),
					"36": this.$t('search:crane'),
					"37": this.$t('search:trailer'),
					"38": this.$t('search:mixerTruck'),
					"40": this.$t('search:fireTruck'),
					"41": this.$t('search:escort'),
					"42": this.$t('search:repairTruck'),
					"43": this.$t('search:rescue'),
					"512": this.$t('search:allModels'),
				}
			return sexEnum[str] || '--'
		},
		vehiclePlateColorFormat() {
			const str = this.item.vehiclePlateColor,
				sexEnum = {
					"0": this.$t('search:unknownUnrecognized'),
					"1": this.$t('search:black'),
					"2": this.$t('search:white'),
					"3": this.$t('search:gray'),
					"4": this.$t('search:red'),
					"5": this.$t('search:blue'),
					"6": this.$t('search:yellow'),
					"7": this.$t('search:orange'),
					"8": this.$t('search:brown'),
					"9": this.$t('search:green'),
					"10": this.$t('search:purple'),
					"11": this.$t('search:cyan'),
					"12": this.$t('search:pink'),
					"13": this.$t('search:transparent'),
					"14": this.$t('search:gold'),
					"15": this.$t('search:silver'),
					"16": this.$t('search:darkGray'),
					"null": this.$t('search:unknown')
				}
			return sexEnum[str] || '--'
		}
	},
	created() { },
	methods: {},
	filters: {
		// 时间戳处理
		formatDate: function (num) {
			let date = new Date(num);
			//时间戳为10位需*1000，时间戳为13位的话不需乘1000
			let y = date.getFullYear();
			let MM = date.getMonth() + 1;
			MM = MM < 10 ? ('0' + MM) : MM; //月补0
			let d = date.getDate();
			d = d < 10 ? ('0' + d) : d; //天补0
			let h = date.getHours();
			h = h < 10 ? ('0' + h) : h; //小时补0
			let m = date.getMinutes();
			m = m < 10 ? ('0' + m) : m; //分钟补0
			let s = date.getSeconds();
			s = s < 10 ? ('0' + s) : s; //秒补0
			return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
		},
	}
}
</script>

<style scoped>
ul,
li {
	list-style: none;
}

ul {
	display: flex;
	flex-direction: column;
	padding: 0 30rpx;
}

ul li {
	padding: 30rpx 0;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	border-bottom: 1px solid #ccc;
}

.left {
	width: 43%;
	display: flex;
	align-items: center;
	justify-content: start;
}

.left .img1 {
	width: 100%;
}

.img1:first-child .img {
	padding-right: 10rpx;
}

.img1 .img {
	width: 100%;
	height: 335rpx;
	border-radius: 10rpx;
}

.right {
	width: 57%;
	padding-left: 25rpx;
}

.right .line {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}

.right .line .title {
	font-size: 34rpx;
}

.titles {
	font-size: 34rpx;
	color: #2879FF;
}

.right .line .Proportion {
	font-size: 40rpx;
	background-color: #f76f3a;
	padding: 10rpx 20rpx;
	color: #fff;
	border-radius: 8rpx;
	margin-bottom: 10rpx;
}

.right .line_box {
	display: flex;
	align-items: center;
	flex-direction: row;
	padding: 5rpx 0;
}

.right .line_box .text {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding-left: 5rpx;
}

.icon {
	padding: 5rpx;
	width: 40rpx;
	height: 40rpx;
}
</style>
